@import '~element-ui/lib/theme-chalk/index.css';
@import './element-chalk.scss';

::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}
::view-transition-old(root),
.dark::view-transition-new(root) {
	z-index: 2147483646;
}

:root {
	--el-color-primary: #409eff;
	--el-color-primary-light-1: #66b1ff;
	--el-color-primary-light-2: #a0cfff;
	--el-color-primary-light-3: #c6e2ff;
	--el-color-primary-light-4: #d9ecff;
	--el-color-primary-light-5: #ecf5ff;
	--el-border-color-light: #e4e7ed;
	--el-bg-color-overlay: #ffffff;
  --el-fill-color-light: #f5f7fa;
	--el-text-color-primary: #303133;
}

:root.dark {
	color-scheme: dark;
	--el-border-color-light: #414243;
	--el-bg-color-overlay: #1d1e1f;
  --el-fill-color-light: #262727;
	--el-text-color-primary: #e5eaf3;
}

body {
	height: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family:
		Helvetica Neue,
		Helvetica,
		PingFang SC,
		Hiragino Sans GB,
		Microsoft YaHei,
		Arial,
		sans-serif;
	color: var(--el-text-color-primary);
}

html {
	height: 100%;
	box-sizing: border-box;
}

#app {
	height: 100%;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

a,
a:focus,
a:hover {
	cursor: pointer;
	color: inherit;
	outline: none;
	text-decoration: none;
}

*::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
*::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: #5e708d;
}
*::-webkit-scrollbar-track {
	border-radius: 4px;
	background: #ddd;
}

.container {
	padding: 20px;
	overflow-y: auto;
	height: 100%;
	.el-card {
		overflow: visible;
	}
	.json-title {
		font-size: 16px;
		margin: 20px 0;
	}
	.card-body {
		padding: 20px;
	}
	.card-footer {
		margin-top: 20px;
		border-top: 1px solid var(--el-border-color-light);
		box-sizing: border-box;
	}
}

.my-awesome-json-theme {
  max-height: 500px;
  overflow: auto;
  background: #363e4f;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  font-family: Consolas, Menlo, Courier, monospace;

  .jv-ellipsis {
    color: #ff9900;
    background-color: #808695;
    display: inline-block;
    line-height: 0.9;
    font-size: 0.9em;
    padding: 0 4px 2px 4px;
    border-radius: 3px;
    vertical-align: 0;
    cursor: pointer;
    user-select: none;
  }

  .jv-button {
    color: #49b3ff;
  }

  .jv-key {
    color: #eaf3ff;
  }

  .jv-item {
    &.jv-array {
      color: #eaf3ff;
    }

    &.jv-boolean {
      color: #fc1e70;
    }

    &.jv-function {
      color: #067bca;
    }

    &.jv-number {
      color: #fc1e70;
    }

    &.jv-object {
      color: #eaf3ff;
    }

    &.jv-undefined {
      color: #e08331;
    }

    &.jv-string {
      color: #42b983;
      word-break: break-word;
      white-space: normal;
    }
  }

  .jv-code {
    .jv-toggle {
      &:before {
        padding: 0 2px;
        border-radius: 2px;
      }

      &:hover {
        &:before {
          background: #eee;
        }
      }
    }
  }
}
